<template>
  <div class="orgization">

    <treeInfo @getOrgizationInfo="getOrgizationInfo" />

    <div class="org-right">
      <div class="org-info">
        <!-- <orgInfo :orgization-info="orgizationInfo" /> -->
        <el-card header="机构信息" style="width:100%">
          <el-form label-width="120px" :disabled="isEdit">
            <el-row type="flex">
              <el-col>
                <el-form-item label="机构编号">
                  <el-input v-model="orgizationInfo.id" disabled />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="机构名称">
                  <el-input v-model="orgizationInfo.name" disabled />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="机构类型">
                  <el-select :value="setMap.orgizationType[orgizationInfo.type]" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <!-- <orgAddress :orgization-info="orgizationInfo" /> -->
              <el-form-item label="机构地址">
                <el-row type="flex">
                  <el-col>
                    <el-select
                      v-model="provinceId"
                      placeholder="请选择省"
                      style="width: 100%"
                      clearable
                    >
                      <el-option
                        v-for="item in provinces"
                        :key="item.id"
                        size="small"
                        :label="item.name"
                        :value="item.id"
                        @click.native="changeProvince(item.id)"
                      />
                    </el-select>
                  </el-col>
                  <el-col style="margin:0 4px">
                    <el-select
                      v-model="cityId"
                      placeholder="请选择市"
                      style="width: 100%"
                      :disabled="provinceId===''"
                      clearable
                    >
                      <el-option
                        v-for="item in cities"
                        :key="item.value"
                        size="small"
                        :label="item.name"
                        :value="item.id"
                        @click.native="changeCity(item.id)"
                      />
                    </el-select>
                  </el-col>
                  <el-col><el-select
                    v-model="countyId"
                    placeholder="请选择区"
                    style="width: 100%"
                    clearable
                    :disabled="provinceId==='' || cityId===''"
                  >
                    <el-option
                      v-for="item in area"
                      :key="item.value"
                      size="small"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select></el-col>
                </el-row>
              </el-form-item>
            </el-row>
            <el-row type="flex">
              <el-col>
                <el-form-item label="详细地址">
                  <el-input v-model="orgizationInfo.address" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="经度">
                  <el-input v-model="lng" disabled />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="纬度">
                  <el-input v-model="lat" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col>
                <el-form-item label="机构负责人">
                  <el-input v-model="orgizationInfo.managerName" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="机构电话">
                  <el-input v-model="orgizationInfo.phone" />
                </el-form-item>
              </el-col>
              <el-col />
            </el-row>
          </el-form>
          <el-row type="flex" justify="center">
            <el-button type="danger" style="width:89px;height:36px" @click="submitEdit">{{ isEdit?'编辑':'保存' }}</el-button>
          </el-row>
        </el-card>
      </div>
      <div class="employee">
        <employeeTable :nodekey="nodekey" />
      </div>
    </div>
  </div>
</template>

<script>
// import { getCityApi, getProvinceApi } from '@/api/ogization'
import { getOrgizationInfoApi, getCityApi, getProvinceApi, editOrgizationApi } from '@/api/ogization'
// import orgInfo from './components/org-info.vue'
import employeeTable from './components/employee-table.vue'
import treeInfo from '@/components/treeInfo/index.vue'
import setMap from '@/constant/setMap'
export default {
  components: {
    // orgInfo,
    employeeTable,
    treeInfo
  },
  data() {
    return {
      setMap,
      nodekey: '',
      // 组织信息
      orgizationInfo: {},
      isEdit: true,
      // 省市区
      provinces: [],
      cities: [],
      area: [],
      provinceId: '',
      cityId: '',
      countyId: '',
      lng: '',
      lat: ''
    }
  },

  methods: {
    // 获取机构详情
    async getOrgizationInfo(nodekey) {
      this.orgizationInfo = {}
      this.nodekey = nodekey
      const res = await getOrgizationInfoApi(nodekey, { 0: nodekey })
      this.orgizationInfo = res
      this.provinceId = res.province.id
      this.cityId = res.city.id
      this.countyId = res.county.id
      this.lng = res.province.lng
      this.lat = res.province.lat
      this.getProvince()
    },
    // 编辑信息
    async submitEdit() {
      this.isEdit = !this.isEdit
      if (this.isEdit) {
        await editOrgizationApi({ ...this.orgizationInfo,
          provinceId: this.provinceId,
          cityId: this.cityId,
          countyId: this.countyId })
        this.$message.success('修改成功')
        this.getOrgizationInfo(this.nodekey)
      }
    },
    // 获取省份
    async getProvince() {
      // const res = await getProvinceApi()
      this.provinces = await getProvinceApi()
      this.cities = await getCityApi(this.orgizationInfo.province.id)
      this.area = await getCityApi(this.orgizationInfo.city.id)
    },
    // 获取城市
    async changeProvince(id) {
      this.cities = await getCityApi(id)
      this.cityId = ''
      this.countyId = ''
    },
    // 获取地区
    async changeCity(id) {
      // console.log()
      this.area = await getCityApi(id)
      this.countyId = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.orgization{
  display: flex;
}
.org-right{
  flex: 1;
  >div{
    margin: 12px;
  }
  ::v-deep .el-card{
    .el-card__header{
      font-weight: 700;
      background-color: #fafafa;
    }

}
}

</style>
